<template>
	<view>
		<view class="Lu-order-lists" v-if="order">
			<view class="Lu-order-list" v-for="(item,index) in orderList" :key="index">
				<view class="Lu-order-header">
					<view class="Lu-order-title">
						<image class="Lu-order-img" src="/static/image/order/baobanshezhicopy.png"></image>
						<view class="Lu-order-name">{{item.class_list.course_name}}</view>
					</view>
					<view class="Lu-order-Paid">已付款</view>
				</view>
				<view class="Lu-order-body">
					<view class="Lu-order-commo">
						<image class="Lu-order-img" src="/static/image/order/222.png"></image>
					</view>
					<view class="Lu-order-infor">
						<view class="Lu-order-time">付款时间:{{item.create_time}}</view>
						<view class="Lu-order-number" v-if="userInfo.identity_type == 3">付款人:{{item.user_id}}</view>
						<view class="Lu-order-number" v-else>数量:1</view>
						
						<view class="Lu-order-price">实付款:¥{{item.order_pay_price}}</view>
					</view>
				</view>
				<view class="clearfix">
					<view class="fr Lu-order-look" @click="navTo(item)">查看详情</view>
				</view>
			</view>
		</view>
		<view class="Lu-order-noLists" v-else>
			<image class="Lu-noorder-img" src="/static/image/order/noorder.png"></image>
			<view class="Lu-noorder-title">您还没订单哦</view>
			<view class="Lu-noorder-go" @click="navTo1('/pages/classification/index')">去下单</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				orderList:[],
				order:false
			}
		},
		onLoad:function(){
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask:true
			// })
			this.getorderList()
		},
		
		onShow:function(){
			
		},
		onReady:function(){
			
		},
		created() {
			
		},
		methods:{
			navTo:function(item) {
				uni.navigateTo({
					url: `/pages/personal/orderinfor?id=${item.id}`
				})
			},
			navTo1(url) {
				// if (!this.hasLogin) {
				// 	url = '/pages/login/login';
				// }
				uni.switchTab({
					url
				})
			},
			getorderList:function(){
				console.log(this.order)
				uni.request({
					url:this.apiUrl+'api/my_course_list',
					data:{
						
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						if(res.data.data.length == 0){
							
						}else{
							this.orderList = res.data.data;
							this.order = true
						}
					},
					complete(){
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.Lu-order-lists{
		
		padding: 30rpx;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.clearfix:after {  
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;  
	}
	.Lu-order-list{
		margin: 20rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		.Lu-order-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 10rpx;
			.Lu-order-title{
				display: flex;
				align-items: center;
				justify-content: center;
				.Lu-order-img{
					width: 24rpx;
					height: 30rpx;
				}
				.Lu-order-name{
					font-size: 30rpx;
					color: #333333;
					margin-left: 24rpx;
				}
			}
			.Lu-order-Paid{
				font-size: 24rpx;
				color: #999999;
			}
		}
		.Lu-order-body{
			display: flex;
			align-items: center;
			margin-top: 54rpx;
			.Lu-order-commo{
				width: 102rpx;
				height: 102rpx;
				.Lu-order-img{
					width: 100%;
					height: 100%;
				}
			}
			.Lu-order-infor{
				margin-left: 26rpx;
				.Lu-order-time,.Lu-order-number,.Lu-order-price{
					font-size: 24rpx;
					margin-bottom: 12rpx;
					color: #333333;
				}
			}
		}
	}
	.Lu-order-noLists{
		text-align: center;
		.Lu-noorder-img{
			margin-top: 220rpx;
			margin-bottom: 50rpx;
		}
		.Lu-noorder-title{
			font-size: 24rpx;
			color: #666666;
		}
		.Lu-noorder-go{
			background-color: #363c92;
			color: #fff;
			width: 146rpx;
			margin: 0 auto;
			height: 52rpx;
			line-height: 52rpx;
			font-size: 36rpx;
			margin-top: 24rpx;
			border-radius: 50rpx;
		}
	}
</style>
